import React, { useState } from 'react';
import styles from './index.less';
import classnames from 'classnames';
import TabsControlPane from './TabPane';

interface ITabsControlProps {
  children?: React.ReactNode;
}

/**
 * 自定义tabs,为解决样式问题
 */
function TabsControl(props: ITabsControlProps) {
  const { children } = props;
  const [currentIndex, setCurrentIndex] = useState(0);

  // 获取tab索引样式
  const check_title_index = (index: number) => {
    return index === currentIndex && styles['active'];
  };

  // 获取元素索引
  const check_item_index = (index: number) => {
    return index === currentIndex && styles['show'];
  };

  return (
    <div className={styles['tab-content']}>
      {/* 动态生成Tab导航 */}
      <div className={styles['tab_title_wrap']}>
        {// TODO：这里的类型需要处理
        React.Children.map(children, (element: any, index) =>
          element ? (
            <div
              onClick={() => setCurrentIndex(index)}
              className={classnames(styles['tab_title'], check_title_index(index))}
            >
              <span className={styles['tab_title_item']}>
                {element.props.tab}
                {element.props.dot && <div className={styles['tab_item_dot']} />}
              </span>
            </div>
          ) : null
        )}
      </div>
      {/* Tab内容区域 */}
      <div className={styles['tab_item_wrap']}>
        {React.Children.map(children, (element, index) => {
          return (
            <div className={classnames(styles['tab_item'], check_item_index(index))}>{element}</div>
          );
        })}
      </div>
    </div>
  );
}

TabsControl.TabPane = TabsControlPane;
export default TabsControl;
